<template>
  <div class="app">
    <app-navbar class="app-navbar" ></app-navbar>
    <!-- <div class="bottom"></div> -->
    <el-container>
      <el-aside width="200px">
         <app-aside></app-aside>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
      
    <app-bottom ref="appBottom"></app-bottom>
    <play-list ref="playlist"></play-list>
  </div>
</template>

<script>
import appNavbar from './views/appview/appNavbar.vue'
import appBottom from './views/appview/appBottom.vue'
import appAside from './views/appview/appAside.vue'
import playList from './views/appview/playList'
export default {
  name: 'app',
  components:{
    appNavbar,
    appBottom,
    appAside,
    playList
  },
}
</script>

<style scoped>
.app{
  /* height: 100vh; */
  /* overflow: hidden; */
  /* z-index:0; */
}
/* .app-navbar{
  z-index: 100;
} */
.el-aside{
  height: calc(100vh - 106px);
  border-right: 1px solid rgb(225,225,225);
}
.el-main{
  padding: 12px 30px;
}
.el-main{
  height: 90vh;
  overflow:scroll;
  /* padding-bottom: 70px; */
}
.el-main::-webkit-scrollbar {
  display: none;
}
/* .playlist{
  height: 70%;
} */
</style>
